<template>
<ScalablePage>
  <!-- 清水池  qsc -->
  <div class="left">
    <h2><img src="../assets/psj/gy.png" style="width:100%" /></h2>
    <div class="psj-p psj-txt">
      <p>
        清水池是给水系统中的调蓄构筑物。现设2座1.0万m’清水池，调节容积为供水规模的10%。清水池为地下式水池，池深4.0m，池内水深3.8m。池内设导流墙，池顶及池周边设1.2m厚的覆土层进行防冻保温，并进行绿化处理。
      </p>
    </div>
    <h1><img src="../assets/psj/jcsj.png" style="margin-top: 6px;width:100%" /></h1>
    <h2><img src="../assets/psj/cdct2.png" style="margin-top: 6px" /></h2>
    <div class="psj-con">
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">
            {{ psj.yi }} <sub><span class="pjs-sub">m</span> </sub>
          </div>
          <p class="psj-p">1号池</p>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">
            {{ psj.er }} <sub><span class="pjs-sub">m</span> </sub>
          </div>
          <p class="psj-p">2号池</p>
        </div>
      </div>
    </div>
   

    <div class="qsc-pic"></div>
    <div class="qsc-pic"></div>
  </div>
</ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; 
import { ref, onMounted, reactive, toRefs } from "vue";
import { waterApi } from "@/utils/shuiwu/api";

const state = reactive({
  psj: {
    yi: 0,
    er: 0,
  },
});

let { psj } = toRefs(state);

onMounted(() => {
  getPsj(642);
});

function getPsj(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4645) {
        state.psj.yi = Number(arr[i].value);
      }
      if (arr[i].modelId == 4647) {
        state.psj.er = Number(arr[i].value);
      }
    }
  });
}
</script>
<style scoped></style>
